<template>
  <div class="searchSuggest">
    <div class="serachList">
       <p>搜索"{{inp}}"</p>
       <ul>
         <li v-for="item in suggestList" :key="item.id" @click="$emit('serach',item.name)"><i class="icon"></i><span>{{item.name}}</span>
         </li>
       </ul>
    </div>
  </div>
</template>
<script>
export default {
  props:['inp'],
  data(){
    return{
      suggestList:[],
      // 防抖
      isSuccess:true,
    }
  },
  created(){
    this.getSuggest(this.inp)
  },
  watch:{
    inp(Newvalue){
      this.getSuggest(Newvalue)
    }
  },
  methods:{
    getSuggest(inp){
      if(!this.isSuccess) return null;
      this.isSuccess = false
      this.$http.get('/search/suggest',{
        params:{
          keywords:inp
        }
      }).then(d=>{
        let order = d.data.result.order;
        let result = [];
        // 循环 order里面的数据
        for(let i = 0;i < order.length;i++){
          result = result.concat(d.data.result[order[i]])
        }
        this.suggestList = result
        this.isSuccess = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchSuggest{
  .serachList{
    p{
      height: 50px;
      margin-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      line-height: 50px;
      color: #EE6A22;
    }
    ul{
      li{
        line-height: 45px;
        padding-left: 10px;
        display: flex;
        align-items: center;
        i.icon{
          width: 15px;
          height: 15px;
          background-image: url();
        }
        span{
          padding-left: 7px;
          flex: 1;
          font-size: 14px;
          border-bottom: 1px solid rgba(0,0,0,.1);
        }
      }
    }
  }
  
}
</style>